<template>
  <div class="flex-1 h-full">
    <div class="echarts h-full" :loading="loading">
      <div
        class="flex mt-[10px] ml-[10px] mr-[10px] flex-col"
        v-if="reportData"
      >
        <div class="condition_title">熔炼</div>
        <div class="flex h-[100%] rlq_info_box w-[100%]">
          <div
            v-for="(item, index) in rlDL"
            :key="index"
            class="rlq_info text-center flex-1"
          >
            <div :class="getClassColor(index)">
              {{ item.deviceName || ""
              }}<span
                v-if="reportData[`dianlu${index + 1}`] == 1"
                class="pl-[5px]"
                >正在出铁</span
              >
              <span
                v-if="reportData[`dianlu${index + 1}`] == 0"
                class="pl-[5px]"
                >正在熔化</span
              >
              <span
                v-if="
                  reportData[`dianlu${index + 1}`] != 0 &&
                  reportData[`dianlu${index + 1}`] != 1
                "
                class="pl-[5px]"
                >停用</span
              >
            </div>
          </div>
        </div>

        <div class="condition_title">自动加料机</div>
        <div class="flex h-[100%] rlq_info_box w-[100%]">
          <div
            v-for="(item, index) in zdjljDL"
            :key="index"
            class="rlq_info text-center flex-1"
          >
            <div :class="getClassColorZdjlj(index)">
              {{ item.deviceName || "" }}
            </div>
          </div>
        </div>

        <div class="condition_title">浇注机</div>
        <div class="flex h-[100%] rlq_info_box w-[100%]">
          <div
            v-for="(item, index) in jzDL"
            :key="index"
            class="rlq_info text-center flex-1"
          >
            <div :class="getClassColorJz(index)">
              {{ item.deviceName || "" }}
            </div>
          </div>
        </div>

        <div class="flex mt-[10px]">
          <div class="w-[200px] condition_bottom">
            <div class="condition_title">造型</div>
            <div class="flex w-[100%] condition_icon h-[140px]">
              <div class="condition_icon_text">
                {{
                  reportData?.zaoxing == 1
                    ? "自动运行"
                    : reportData?.zaoxing == 0
                    ? "手动运行"
                    : "-"
                }}
              </div>
            </div>
          </div>
          <div
            class="condition_bottom"
            style="margin-left: 7px; width: calc(100% - 200px - 7px)"
          >
            <div class="condition_title">除尘</div>
            <div class="flex h-[140px] rlq_info_box w-[100%] flex-wrap">
              <div
                v-for="(item, index) in ccDL"
                :key="index"
                class="rlq_info text-center flex-1 rlq_info_min"
              >
                <div :class="getClassColorCc(index)">
                  {{ item.deviceName || "" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { useRoute } from "vue-router";
import * as echarts from "echarts/core";
// import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;

function isDarkMode(params: string) {
  return true;
}

const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});
const { id, second } = toRefs(props);

const reportData = ref();
const loading = ref(false);

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

const nullValue = {
  dianlu1: null,
  dianlu2: null,
  dianlu3: null,
  dianlu4: null,
  qiuhuaji: null,
  yunyuji1: null,
  yunyuji2: null,
  fugaiji: null,
  shaxiang1: null,
  shaxiang2: null,
  shaxiang3: null,
  shaxiang4: null,
  shaxiang5: null,
  shaxiang6: null,
  shaxiang7: null,
  shaxiang8: null,
  ronglianchuchen: null,
  shachuchen1: null,
  shachuchen2: null,
  shachuchen3: null,
  shachuchen4: null,
  zaoxing: null,
};

async function handleSearch() {
  const { data } = await request({
    url: `/mes/biscreendisplayfeeding/getProdceBiData`,
    method: "post",
    data: {},
  })
    .finally(() => {})
    .catch(() => {
      reportData.value = nullValue;
    });
  reportData.value = data ?? nullValue;
  // setTimeout(() => {
  //   loading.value = false;
  //   reportData.value = {
  //     dianlu1: "0",
  //     dianlu2: "1",
  //     dianlu3: "2",
  //     dianlu4: "2",
  //     qiuhuaji: "1",
  //     yunyuji1: "2",
  //     yunyuji2: "3",
  //     fugaiji: "4",
  //     shaxiang1: "1",
  //     shaxiang2: "1",
  //     shaxiang3: "1",
  //     shaxiang4: "2",
  //     shaxiang5: "4",
  //     shaxiang6: "4",
  //     shaxiang7: "3",
  //     shaxiang8: "4",
  //     ronglianchuchen: "1",
  //     shachuchen1: "1",
  //     shachuchen2: "1",
  //     shachuchen3: "0",
  //     shachuchen4: "0",
  //     zaoxing: "1",
  //   };
  // }, 500);
}

// 熔炼
const rlDL = ref([
  {
    deviceName: "1#炉",
  },
  {
    deviceName: "2#炉",
  },
  {
    deviceName: "3#炉",
  },
  {
    deviceName: "4#炉",
  },
]);
function getClassColor(index: any) {
  if (reportData.value[`dianlu${index + 1}`] == 0) {
    return "white_back";
  }
  if (reportData.value[`dianlu${index + 1}`] == 1) {
    return "white_back";
  }
  return "grey_back";
}

// 自动加料机
const zdjljDL = ref([
  {
    deviceName: "球化剂",
    label: "qiuhuaji",
  },
  {
    deviceName: "孕育剂1",
    label: "yunyuji1",
  },
  {
    deviceName: "孕育剂2",
    label: "yunyuji2",
  },
  {
    deviceName: "覆盖剂",
    label: "fugaiji",
  },
]);
function getClassColorZdjlj(index: any) {
  if (reportData.value[zdjljDL.value[index].label] == 1) {
    return "green_back";
  }
  if (reportData.value[zdjljDL.value[index].label] == 2) {
    return "yellow_back";
  }
  if (reportData.value[zdjljDL.value[index].label] == 3) {
    return "red_back";
  }
  return "grey_back";
}

// 浇注机
const jzDL = ref([
  {
    deviceName: "砂箱1",
  },
  {
    deviceName: "砂箱2",
  },
  {
    deviceName: "砂箱3",
  },
  {
    deviceName: "砂箱4",
  },
  {
    deviceName: "砂箱5",
  },
  {
    deviceName: "砂箱6",
  },
  {
    deviceName: "砂箱7",
  },
  {
    deviceName: "砂箱8",
  },
]);
function getClassColorJz(index: any) {
  if (reportData.value[`shaxiang${index + 1}`] == 1) {
    return "green_back";
  }
  if (reportData.value[`shaxiang${index + 1}`] == 2) {
    return "red_back";
  }
  // if (reportData.value[`shaxiang${index + 1}`] == 3) {
  //   return "yellow_back";
  // }
  if (reportData.value[`shaxiang${index + 1}`] == 4) {
    return "white_back1";
  }
  return "grey_back";
}

// 除尘

const ccDL = ref([
  {
    deviceName: "熔炼除尘",
    label: "ronglianchuchen",
    col: 2,
  },
  {
    deviceName: "砂处理除尘1",
    label: "shachuchen1",
    col: 1,
  },
  {
    deviceName: "砂处理除尘2",
    label: "shachuchen2",
    col: 1,
  },
  {
    deviceName: "砂处理除尘3",
    label: "shachuchen3",
    col: 1,
  },
  {
    deviceName: "砂处理除尘4",
    label: "shachuchen4",
    col: 1,
  },
  {
    deviceName: "",
    col: 2,
  },
]);
function getClassColorCc(index: any) {
  if (reportData.value[ccDL.value[index].label] == 1) {
    return "green_back";
  }
  return "grey_back";
}

// 定时刷新
let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    handleSearch();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  handleSearch();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.rlq_info_box {
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 15px;
  .rlq_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 40px;
    justify-content: center;
    margin: 5px;
    font-weight: 400;
    div:nth-child(1) {
      //   writing-mode: horizontal-tb;
      //   word-spacing: 0px;
      //   letter-spacing: 0px;
      //   text-orientation: upright;
      color: rgba(255, 255, 255, 1);
      //   user-select: text;
      font-size: 16px;
      //   line-height: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      //   font-family: YOUSHE;
    }
  }
}

.green-color {
  color: #2ffff3 !important;
}
.green_back {
  background-color: #0cecb4 !important;
  width: 100%;
  color: #2f4f4f !important;
}
.red_back {
  background-color: #ff4d4f !important;
  width: 100%;
  color: #fff !important;
}
.yellow_back {
  background-color: #ffdd59 !important;
  width: 100%;
  color: #000 !important;
}
.grey_back {
  //   background-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(95, 156, 255, 0.12);
  width: 100%;
  color: #fff !important;
}

.white_back1 {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: rgb(6, 57, 133) !important;
}

.white_back {
  width: 100%;
  color: #fff !important;
  background: linear-gradient(
    0deg,
    rgba(1, 94, 234, 0.8) 0px,
    rgba(0, 192, 250, 0.2) 100%
  );
}
.condition_title {
  font-size: 19px;
  text-align: center;
  font-family: YOUSHE;
  color: #fff;
  text-decoration: underline;
  //   word-spacing: 0px;
  //   writing-mode: horizontal-tb;
  //   text-orientation: upright;
  //   color: transparent;
  //   background: linear-gradient(
  //       0deg,
  //       rgb(88, 175, 255) 0px,
  //       rgb(255, 255, 255) 100%
  //     )
  //     text;
  //   clip-path: inset(1px);
}

.condition_bottom {
  height: 170px;
  background-color: rgba(95, 156, 255, 0.12);
  //   background: url("@/assets/images/screen/preview (1).png") center center / 100%
  //     100% no-repeat;
  border-radius: 4px;
  .rlq_info_min {
    min-width: 90px;
  }
  .rlq_info_box {
    margin-bottom: 0px !important;
  }
}

.condition_icon {
  background-image: url("@/assets/images/screen/preview11.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  .condition_icon_text {
    margin-top: 20px;
    font-size: 28px;
    font-family: YOUSHE;
    color: #03ecf8;
    text-align: center;
  }
}
</style>
